<template>
    <div class="section-wrap hotworkApprove">
        <div class="form-section">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>项目名称</label>
                </div>
                <div class="newcompanyList approvehide">
                    <!-- {{dataList.DeptName}} -->
                    {{userInfo.departsir == 2?userInfo.pdeptname:dataList.DeptName}}
                </div>
            </div>

            <!-- <div class="c-list" @click="showDhclass">
                <div class="c-left">
                    申请动火班组
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="c-right">
                    <div class="c-select">{{dhperson?dhperson:'请选择'}}</div>
                    <i class="iconfont icon-jinru rightmsg"></i>
                </div>
            </div> -->

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>申请动火班组</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="right-select"
                     @click="selectType">
                    {{dataList.FireSquad?dataList.FireSquad:'请选择'}}
                    <i class="iconfont icon-jinru rightmsg"></i>
                </div>
            </div>

            <div class="c-list"
                 @click="showperson">
                <div class="c-left">
                    动火班组负责人
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="c-right">
                    <div class="c-select">{{dataList.GroupPerson?dataList.GroupPerson:'请选择'}}</div>
                    <i class="iconfont icon-jinru rightmsg"></i>
                </div>
            </div>
            <!--
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>动火班组负责人</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <group>
                    <popup-picker :data="hiddenmeta.chargePerson"
                                    v-if="dhShow"
                                  v-model="dhchargeperson"
                                  placeholder="请选择"></popup-picker>
                </group>
            </div> -->

            <div class="c-list"
                 @click="showdher">
                <div class="c-left">
                    动火人
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="c-right">
                    <div class="c-select">{{dataList.Person?dataList.Person:'请选择'}}</div>
                    <i class="iconfont icon-jinru rightmsg"></i>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>动火部位</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <textarea placeholder="请输入部位描述（自行换行）"
                              v-model="dataList.FireParts"></textarea>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>动火级别</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.Level?dataList.Level:'一级'}}
                </div>
            </div>

            <div class="c-list"
                 @click="showline">
                <div class="c-left">
                    动火作业种类
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="c-right">
                    <div class="c-select">{{dataList.JobClass?dataList.JobClass:'用火'}}</div>
                    <i class="iconfont icon-jinru rightmsg"></i>
                </div>
            </div>

            <!-- <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>动火作业种类</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <group>
                    <popup-picker :data="hiddenmeta.hdLevel"
                                  v-model="dhcate"
                                  placeholder="请选择"></popup-picker>
                </group>
            </div> -->
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>申请日期</label>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.CreateDate | filterdata}}
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>动火开始日期</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <group>
                    <datetime :start-date="showDate"
                              v-model="dataList.StartDate"
                              @on-confirm="changeStartTime"></datetime>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>动火结束日期</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <group>
                    <datetime :start-date="showDateEnd"
                              v-model="dataList.EndDate"
                              @on-confirm="changeEndTime"></datetime>
                </group>
            </div>
        </div>
        <div class="form-section">
            <div class="saveFiretit">
                灭火器材配置情况现场防火措施预案
            </div>
            <!-- <checklist :options="commonList"
                        @click="selectChange"
                        v-model="checkOpt"></checklist>    -->

            <div class="saveChecklist"
                 v-for="(checkOne,index) in commonList"
                 :key="index">
                <input class="saveCheckInp"
                       type="checkbox"
                       :class="{'checkedopt': checkStatusList.indexOf(checkOne)>=0}"
                       :checked="checkStatusList.indexOf(checkOne)>=0"
                       @click='checkedOne(checkOne)'>
                <span>{{checkOne}}</span>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>动火必须做到</label>
                    </div>
                    <span v-if="Measure"
                          @click="unfoldMeasure = !unfoldMeasure">{{unfoldMeasure?'收起': '展开'}}</span>
                </div>
                <div class="msgArea"
                     :class="{'unfold':unfoldMeasure}">
                    <div v-if="Measure"
                         v-for="(item,index) in Measure"
                         :key="index">{{item | myTrim}}</div>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>申请人意见</label>
                </div>
                <div>
                    <x-textarea :placeholder="('请输入意见(自动换行)')"
                                :max="2000"
                                :height="50"
                                v-model="dataList.Propose"></x-textarea>
                </div>
            </div>

            <!-- 审批信息 -->
            <div class="approveBox"
                 v-if='approveStatus'>
                <div class="approveTit">审批信息</div>
                <div class="approveWrap"
                     v-if='dataList.ApproveInfo.length>0'
                     v-for="(item,index) in dataList.ApproveInfo"
                     :key="index">
                    <div class="form-item form-item-style2">
                        <div class="label-title">
                            <label>审批意见</label>
                        </div>
                        <div>
                            <!-- <textarea class="areainfo"
                                    height="500"
                                    placeholder="请输入审批意见"
                                    v-model="item.Remark"
                                    :disabled="isDisable"></textarea> -->
                            <p class="textarea">{{item.Remark}}</p>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批结论</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{item.ApproveResult}}
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批人</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{item.ApprovePersonName}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="btns"
                 v-if="syself">
                <button @click="toSubmit">提交</button>
            </div>
        </div>

        <!--获取动火班组负责人-->
        <div v-transfer-dom>
            <popup v-model="personValue"
                   width="100%">
                <div class="position-horizontal-demo"
                     v-for="(item,index) in chargePerson"
                     :key="index"
                     @click="selectPerson(item)">
                    <span class="vux-close">
                        {{item.name}}
                    </span>
                </div>
            </popup>
        </div>

        <!--获取动火人-->
        <div v-transfer-dom>
            <popup v-model="dhpersonValue"
                   width="100%">
                <div class="searchDiv1 searchDiv2">
                    <div class="user-type-wrap">
                        <div class="userTypeName"
                             @click="showType = !showType">
                            <h4>{{equipmentTypeVal}}</h4>
                            <x-icon type="ios-arrow-down"
                                    size="20"
                                    class="icon-down"></x-icon>
                        </div>
                        <ul class="user-type-list"
                            v-show="showType">
                            <li v-for="(item,index) in  equipmentType"
                                :key="index"
                                @click="selectUserType(item)">{{item}}</li>
                        </ul>
                    </div>
                    <div class="search-wrap">
                        <input type="text"
                               v-model="keyWord"
                               placeholder="请输入关键字查询">
                        <button @click="getDhPerson"></button>
                    </div>
                </div>
                <div class="position-horizontal-demo"
                     v-for="(item,index) in chargePerson"
                     :key="index"
                     @click="selectdher(item)">
                    <span class="vux-close">
                        {{item.name}}
                    </span>
                </div>
            </popup>
        </div>

        <!--获取动火作业种类-->
        <div v-transfer-dom>
            <popup v-model="lineValue"
                   width="100%">
                <div class="position-horizontal-demo"
                     v-for="(item,index) in hdLevel"
                     :key="index"
                     @click="selectline(item,index)">
                    <span class="vux-close">
                        {{item}}
                    </span>
                    <x-icon type="ios-checkmark-empty"
                            size="30"
                            v-if="checklist[index]"></x-icon>
                </div>
            </popup>
        </div>
        <myMenu></myMenu>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { TransferDom, Popup } from 'vux'
import myMenu from '@/commonComponents/menu'
export default {
    components: {
        myMenu,
        Popup
    },
    directives: {
        TransferDom
    },
    computed: {
        ...mapState([
            'dhqClass'
        ])
    },
    data () {
        return {
            dataList: {
                DeptName: '', // 项目名称
                FireSquad: '', // 申请动火班组
                GroupPerson: '', // 动火班组负责人
                Person: '', // 动火人
                FireParts: '', // 动火部位
                Level: '一级', // 动火级别
                JobClass: '用火', // 动火作业种类
                CreateDate: this.getDate(), // 申请日期
                StartDate: this.getDate(), // 动火开始日期
                EndDate: this.getDate(), // 动火结束日期
                PlanText: '', // 措施预案选择集合（字符串）
                ApplyUnit: '', // 申请人部门
                ApplyUnitid: '', // 申请人部门id
                GroupPersonId: '', // 动火负责人id
                personId: ''// 动火人id
            },
            unfoldMeasure: false, // 展开隐患措施
            lineValue: false, // 动火作业种类选择弹框是否显示
            personValue: false, // 动火班组负责人选择弹窗是否显示
            dhpersonValue: false, // 动火人选择弹窗是否显示
            commonList: ['动火方案', '配备灭火器', '明确动火监护人', '动火点周围可燃材料已清理', '动火人配备安全防护用品(如防护罩、防护手套等）', '是否动火旁站监督'], // 措施预案选项
            checkStatusList: [], // 措施预案选择集合
            role: '', // 检查单位类型
            chargePerson: [], // 动火班组负责人、动火人列表
            hdLevel: ['用火', '切割', '电焊', '其他'], // 动火作业种类
            Measure: [
                '1.动火人必须有特种作业人员操作证、经审批的动火证，严格按照操作规程动火。',
                '2.动火前清除周围10m内的易燃、易爆物品，遇有无法清除的易燃物必须采取可靠的隔离防火措施。',
                '3.动火区域必须有专人看火，同时配备灭火器材，看火人随时关注火区及周边防火安全，不得随意脱岗。',
                '4.风力超过5级时，不得进行高空动火作业正下方必须使用接火斗。',
                '5.凡涉及电、气焊等操作的明火作业，操作人员必须持证上岗。',
                '6.动火完毕，必须对现场进行检查，确认无火灾隐患，切断电源后方可离开。',
                '7.批准人勘查现场后才能批准申请。',
                '8.如遇突发情况，向项目有关人员反映，如有需要请及时拨打110、119、120等。'
            ],
            userId: '',
            tokenId: '',
            userInfo: '',
            showDate: this.getDate(), // 动火开始时间最小限制
            showDateEnd: this.getDate(), // 动火结束时间最小限制
            checklist: [], // 动火种类列表
            addFlag: true, // 提交开关（避免多次提交
            approveStatus: false, // 是否展示审批信息
            isDisable: true,
            syself: true,
            equipmentType: ['姓名', '工种'], //  搜索条件
            equipmentTypeVal: '姓名', // 选中的搜索条件
            keyWord: '',
            showType: false
        }
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.userId = this.userInfo.userid
        this.tokenId = this.userInfo.tokenId
        this.dataList.ApplyUnitid = this.userInfo.deptid
        this.dataList.DeptName = this.userInfo.deptname
        this.role = this.userInfo.departsir
        if (this.$route.query.id) {
            this.getData()
        }
        if (this.dhqClass.newdepId) {
            this.dataList.FireSquad = this.dhqClass.Name
            this.dataList.GroupPerson = this.dhqClass.DutyPerson
            this.getDhPerson()
        }
    },
    filters: {
        filterdata (val) {
            if (!val) {
                return false
            }
            return val.substring(0, 10)
        }
    },
    methods: {
        // 获取详情数据
        getData () {
            let that = this
            let param = {
                'allowPaging': true,
                'business': 'GetFireJobDetail',
                'data': {
                    'id': this.$route.query.id
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': 'CD9D3B5786AF0333B02C53F1A84C45B6',
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    console.log(res)
                    that.dataList = res.data.data
                    that.checkStatusList = that.dataList.PlanText.split(',')
                    that.dhqClass.newdepId = res.data.data.FireSquadid
                    that.dataList.GroupPerson = res.data.data.GroupPerson
                    if (that.dataList.StartDate) {
                        that.$set(that.dataList, 'StartDate', that.dataList.StartDate.substring(0, 10))
                    }
                    if (that.dataList.EndDate) {
                        that.$set(that.dataList, 'EndDate', that.dataList.EndDate.substring(0, 10))
                    }
                    that.getDhPerson()

                    that.syself = res.data.data.CanEdit
                    if (res.data.data.ApproveInfo.length > 0) {
                        this.approveStatus = true
                    }
                }
            ).catch(response => {

            })
        },
        // 获取动火班组负责人,动火人数据
        getDhPerson () {
            let that = this
            let params = {
                'allowPaging': false,
                'business': 'GetUserInfoByWork',
                'data': {
                    'deptid': this.dhqClass.newdepId,
                    'type': 2,
                    'flag': this.equipmentTypeVal == '姓名' ? 0 : 1,
                    'name': this.keyWord
                },
                'pageIndex': 0,
                'pageSize': 10000,
                'tokenId': 'D88D91080532D871B4CB391F97B5C242',
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(params).then((res) => {
                // console.log(res)
                if (res.data.code === 0) {
                    that.chargePerson = res.data.data
                    // console.log(that.hiddenmeta.chargePerson)
                }
            }).catch(() => {

            })
        },

        // 点击动火班组负责人
        showperson () {
            if (this.chargePerson.length == 0) {
                this.personValue = false
                if (this.dhqClass.newdepId) {
                    this.$vux.toast.text('暂无数据...')
                } else {
                    this.$vux.toast.text('请选择申请动火班组')
                }
            } else {
                this.personValue = true
            }
        },
        // 选择动火班组负责人列表数据
        selectPerson (item) {
            this.dataList.GroupPerson = item.name
            this.dataList.GroupPersonId = item.id
            this.personValue = false
        },
        // 点击动火人
        showdher () {
            if (this.chargePerson.length == 0) {
                this.dhpersonValue = false
                if (this.dhqClass.newdepId) {
                    this.$vux.toast.text('暂无数据...')
                } else {
                    this.$vux.toast.text('请选择申请动火班组')
                }
            } else {
                this.dhpersonValue = true
            }
        },
        // 选择动火人列表数据
        selectdher (item) {
            this.dataList.Person = item.name
            this.dataList.personId = item.id
            this.dhpersonValue = false
        },
        // 点击动火作业种类
        showline () {
            this.lineValue = true
        },
        // 选择动火作业种类列表数据
        selectline (items, index) {
            // console.log(index);
            this.checklist[index] = !this.checklist[index]
            let typeNamelist = []
            let typeLists = []
            this.checklist.forEach(
                (item, index1) => {
                    if (item) {
                        typeNamelist.push(this.hdLevel[index1])
                    }
                }
            )
            this.dataList.JobClass = typeNamelist.join(',')
            this.$forceUpdate()
        },

        // 线形转树形
        totree (list) {
            let id,
                deptName
            // list.forEach(
            //     (item) => {
            //         if (item.type == 1) {
            //             id = item.deptId
            //             deptName = item.deptName
            //         }
            //     }
            // )
            for (var i = 0; i < list.length; i++) {
                if (list[i].type == 1) {
                    id = list[i].deptId
                    deptName = list[i].deptName
                    break
                }
                if (list[i].type == 2) {
                    id = list[i].deptId
                    deptName = list[i].deptName
                    break
                }
            }
            let root = null
            if (list && list.length) {
                root = { deptId: id, parentId: null, deptName: deptName, children: [] }
                const group = {}
                for (let index = 0; index < list.length; index += 1) {
                    if (list[index].parentId !== null && list[index].parentId !== undefined) {
                        if (!group[list[index].parentId]) {
                            group[list[index].parentId] = []
                        }
                        group[list[index].parentId].push(list[index])
                    }
                }
                const queue = []
                queue.push(root)
                while (queue.length) {
                    const node = queue.shift()
                    node.children = group[node.deptId] && group[node.deptId].length ? group[node.deptId] : null
                    if (node.children) {
                        queue.push(...node.children)
                    }
                }
            }
            return root
        },
        // 点击申请
        toSubmit () {
            if (!this.dataList.FireSquad || !this.dataList.GroupPerson || !this.dataList.Person || !this.dataList.FireParts) {
                this.$vux.toast.text('请完善相应信息')
                return false
            }
            // let sendmethod = 'send'
            // if(this.$route.query.id){
            //     sendmethod = "modify";
            // }
            if (!this.addFlag) {
                return false
            }
            this.addFlag = false
            let params = {
                'allowPaging': true,
                'business': 'SetFireJob',
                // 'method': sendmethod,
                'data': {
                    'id': this.$route.query.id,
                    'deptName': this.dataList.DeptName,
                    'CreateDate': this.dataList.CreateDate,
                    'FireParts': this.dataList.FireParts,
                    'FireSquad': this.dataList.FireSquad,
                    'FireSquadId': this.dhqClass.newdepId,
                    'GroupPerson': this.dataList.GroupPerson,
                    'GroupPersonId': this.dataList.GroupPersonId,
                    'JobClass': this.dataList.JobClass,
                    'PlanText': this.checkStatusList.join(','),
                    'applyUnit': this.userInfo.deptname,
                    'applyUnitId': this.userInfo.deptid,
                    'deptId': this.userInfo.deptid,
                    'endDate': this.dataList.EndDate,
                    'level': this.dataList.Level,
                    'person': this.dataList.Person,
                    'personId': this.dataList.personId,
                    'propose': this.dataList.Propose,
                    'startDate': this.dataList.StartDate
                },
                'method': 'send',
                'pageIndex': 0,
                'pageSize': 0,
                'tokenId': 'C7E7148D38F4E0DBECD202F53898702C',
                'userId': this.userInfo.userid
            }
            this.$vux.loading.show({
                text: '正在提交中...'
            })
            this.$axiosAjax.getConfigJson(params).then((res) => {
                if (res.data.code === 0) {
                    this.$vux.toast.text('提交成功')
                    // this.$router.push({
                    //     path: '/workrisk'
                    // })
                    this.$router.go(-1)
                } else {
                    this.addFlag = true
                }
            }).catch(() => {
                this.addFlag = true
            })
        },
        // 点击申请动火班组跳转
        selectType () {
            this.$router.push({ path: '/lookclass' })
        },
        // 多选选择
        selectChange (val, label) {
            // console.log('change', val, label)
        },
        // 措施预案选择
        checkedOne (val) {
            var idIndex = this.checkStatusList.indexOf(val)
            if (idIndex >= 0) {
                this.checkStatusList.splice(idIndex, 1)
            } else {
                this.checkStatusList.push(val)
            }
            // console.log(this.checkStatusList)
        },
        // 获取当前年月日
        getDate () {
            let nowDate = new Date()
            let date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate()
            }
            if (date.month >= 0 && date.month < 10) {
                date.month = '0' + date.month
            }
            if (date.date >= 0 && date.date < 10) {
                date.date = '0' + date.date
            }
            let systemDate = date.year + '-' + date.month + '-' + date.date
            return systemDate || ''
        },
        // 验证开始和结束时间
        checkTime (startTime, endTime, tip) {
            if (startTime.length > 0 && endTime.length > 0) {
                var startTmp = startTime.split('-')
                var endTmp = endTime.split('-')
                var sd = new Date(startTmp[0], startTmp[1], startTmp[2])
                var ed = new Date(endTmp[0], endTmp[1], endTmp[2])
                if (sd.getTime() > ed.getTime()) {
                    // this.$vux.toast.text("开始日期不能大于结束日期");
                    return false
                }
            }
            return true
        },
        // 切换开始时间,结束时间不小于开始时间
        changeStartTime (val) {
            if (!this.checkTime(val, this.dataList.EndDate)) {
                // this.$set(this.hiddenmeta,'resolveStartTime',this.getDate())
                this.$set(this.dataList, 'EndDate', this.dataList.StartDate)
            }
            this.showDateEnd = this.dataList.StartDate
        },
        // 切换结束时间
        changeEndTime (val) {
            if (!this.checkTime(this.dataList.StartDate, val)) {
                this.$set(this.dataList, 'EndDate', this.dataList.StartDate)
            }
        },
        selectUserType (item) {
            this.showType = false
            this.equipmentTypeVal = item
        }
    }
}
</script>
<style lang="less" scoped>
.right-select {
    font-size: 14px;
    color: #999;
}
.right-select > i {
    color: #999;
}
.btns .green {
    // background: #15bc84;
}
.newcompanyList {
    font-size: 14px;
    text-align: right;
    color: #999;
}
.saveFiretit {
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #efeff4;
    margin-left: 20px;
    color: #2269ff;
    font-size: 15px;
}
.saveChecklist {
    display: flex;
    align-items: center;
    height: 55px;
    line-height: 55px;
    font-size: 13px;
    margin-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid #efeff4;
}
.saveChecklist span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 300px;
    font-size: 14px;
    color: #333;
}
.saveCheckInp {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 9px;
    background: #fff url('../../../assets/hideManage/uncheckedicon.jpg')
        no-repeat 0 0;
    background-size: 15px 15px;
}
.saveCheckInp.checkedopt {
    background: #fff url('../../../assets/hideManage/checkedicon.jpg') no-repeat
        0 0;
    background-size: 15px 15px;
}
.c-list {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #efeff4;
}
.c-left {
    color: #333;
    font-size: 14px;
    position: relative;
}
.c-left > i {
    position: absolute;
    top: -5px;
    right: -14px;
}
.c-right {
    color: #666666;
    font-size: 13px;
    display: flex;
    align-items: center;
}
.c-select {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 200px;
    margin-right: 6px;
    text-align: right;
    color: #999;
    font-size: 14px;
}
.hotworkApprove .rightmsg {
    color: #c8c8cd;
}
.position-horizontal-demo {
    height: 55px;
    line-height: 55px;
    padding-left: 20px;
    font-size: 16px;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    background-color: #fff;
    border-bottom: 1px solid #ebeef3;
}
.searchDiv2 {
    display: flex;
    align-items: center;
    height: 60px;
    background: #ebeef3;
    padding: 0 20px;
    overflow: initial;
}
.search-wrap {
    display: flex;
    justify-content: center;
    height: 40px;
    margin: 10px auto;
    border-radius: 8px;
    background: #fff;
    padding: 10px 15px;
    flex: 1;
    margin-left: 10px;
    input {
        height: 20px;
        flex: 1;
        font-size: 14px;
        color: #666;
    }
    button {
        width: 24px;
        height: 25px;
        background: url(../../../../static/images/s_03.png) no-repeat center
            #fff;
        background-size: 24px 25px;
    }
}
.userTypeName {
    display: flex;
    justify-content: space-between;
    background: #fff;
    border-radius: 6px;
    height: 40px;
    align-items: center;
    padding: 0 10px;
}
.userTypeName h4 {
    font-size: 14px;
    color: #999;
}
.icon-down {
    fill: #999;
}
.user-type-wrap {
    position: relative;
}
.user-type-list {
    position: absolute;
    z-index: 2;
    top: 45px;
    width: 100%;
    text-align: center;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.user-type-list li {
    line-height: 30px;
    font-size: 14px;
    color: #999;
}
</style>
<style>
.hotworkApprove .vux-cell-value {
    color: #999;
}
.hotworkApprove .vux-x-textarea {
    width: 100%;
    border: 0 !important;
}
.hotworkApprove .msgArea {
    box-sizing: border-box;
    width: 100%;
    line-height: 25px;
    padding: 10px;
    font-size: 14px;
    height: 110px;
    overflow-y: hidden;
}
.hotworkApprove .msgArea.unfold {
    overflow: auto;
    height: auto;
}
.hotworkApprove .msgArea div {
    color: #999;
    font-size: 14px;
}
.hotworkApprove .form-item-style2 textarea {
    font-family: '微软雅黑';
}
.hotworkApprove .form-item textarea,
.hotworkApprove .form-item .textarea {
    color: #999;
    font-size: 14px;
}
.approveBox {
    border-top: 10px solid #ebeef2;
}
.approveBox .approveTit {
    height: 55px;
    line-height: 55px;
    margin-left: 20px;
    font-size: 15px;
    color: #2269ff;
    border-bottom: 1px solid #efeff4;
}
.approveBox .approveWrap {
    border-bottom: 5px solid #ebeef2;
}
.approveBox .approveWrap:last-child {
    /* border: none; */
}
.searchDiv1 .weui-cells {
    margin-top: 0;
    height: 40px;
    background: #fff;
    border-radius: 8px;
}
.searchDiv1 .vux-cell-value {
    font-size: 14px;
}
.searchDiv1 .weui-cell_access .weui-cell__ft::after {
    border-bottom-width: 2px;
    border-top-width: 0;
    top: -2px;
}
</style>
